<template>
	<div class="global-search-com w-full h-fit">
		<div
			class="search-box transition duration-300 flex items-center justify-center border-2"
			:class="isFocus ? 'border-blue-500' : ''">
			<input
				type="text"
				v-model="inputValue"
				class="search-input"
				placeholder="请输入关键词搜索"
				@focus="isFocus = true"
				@blur="isFocus = false" />
			<button
				title="搜索"
				class="search-btn bg-blue-500 flex items-center justify-center text-white hover:bg-blue-600">
				<icon name="ic:baseline-search" :size="26" style="margin-left: -3px" />
			</button>
		</div>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'GlobalSearch',
	props: {
		modelValue: {
			type: String,
			required: true,
		},
	},
	emits: ['update:modelValue'],
	setup(props, { emit }) {
		// 处理双向绑定
		const inputValue = ref<string>(props.modelValue);
		watch(inputValue, (val: string) => {
			emit('update:modelValue', val);
		});
		watch(
			() => props.modelValue,
			(val: string) => {
				inputValue.value = val;
			}
		);

		// 输入框是否聚焦
		const isFocus = ref<boolean>(false);

		return {
			isFocus,
			inputValue,
		};
	},
});
</script>

<style lang="scss" scoped>
// 搜索
.global-search-com {
	.search-box {
		height: 45px;
		overflow: hidden;
		border-radius: 45px;
		box-sizing: border-box;
		box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);

		.search-input {
			color: #666;
			border: none;
			height: 100%;
			outline: none;
			font-size: 15px;
			padding: 0 18px;
			width: calc(100% - 70px);

			&::placeholder {
				font-size: 15px;
			}
		}

		.search-btn {
			margin: 0;
			padding: 0;
			width: 70px;
			height: 100%;
			border: none;
			outline: none !important;
		}
	}
}
</style>
